{extend name="public/base" /}

{block name="css_new"}
 <link rel="stylesheet" href="__STATIC__/web/css/awardtaskIndex.css">

<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<title>我的奖扣</title>{/block}

{block name="pjax_container"}
<style>
.content {
    background-color: #f0f2f5;
}
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid transparent;
     margin-bottom: 0px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.header {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 98%;
    
    margin: 0 20px;
}

.header-left {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5f5f5f;
}

.header-left>img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 14px;
    vertical-align: middle;
}

.header-left>div>h3 {
    font-size: 16px;
}

.header-left>div>p {
    font-size: 14px;
}

.header-left>div>p>span {
    margin-left: 5px;
}

.content>.row>.nav {
    height: 252px;
    width: 98%;
    margin: 0 20px 0 20px;
    padding: 26px 20px 28px 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.nav-title {
    margin-bottom: 40px;
    font-size: 14px;
    color: #666666;
    letter-spacing: .5px;
}

.nav-body {
    overflow: hidden;
}

.nav-body>.nav-list {
    letter-spacing: .3px;
    width: 25%;
    float: left;
    white-space: nowrap;
}

.nav-body>.nav-list:nth-child(4) {
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.nav-body>.nav-list:nth-child(3) {
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.nav-body>.nav-list:nth-child(3)>div:nth-last-child(1) {
    margin-right: 20%;
}

.nav-body>.nav-list:nth-child(3)>div:nth-last-child(2) {
    margin-right: 20%;
}

.nav-body>.nav-list:nth-child(3)>h2 {
    margin-right: 38%;
}

.nav-body>.nav-list:nth-child(4)>h2 {
    width: 30%;
    text-align: left;
}

.nav-body>.nav-list:nth-child(4)>div:nth-child(4) {
    text-align: left;
    width: 30%;
}

.nav-body>.nav-list>h2 {
    font-size: 28px;
    margin-bottom: 22px;
    color: #f2924c;
}

.nav-body>.nav-list>div {
    font-size: 16px;
    color: #666666;
}

.nav-body>.nav-list>div:nth-of-type(2) {
    margin-bottom: 10px;
}

.nav-body>.nav-list>div>span {
    color: red;
    margin-left: 10px;
    font-size: 14px;
    letter-spacing: .2px;
}

.bonusPoints {
    height: 300px;
    margin: 25px 0 0 0;
    display: flex;
    justify-content: space-around;
}

.bonusPoints>div {
    width: 49%;
    padding: 18px;
    box-sizing: border-box;
    background-color:#fff;
    height: 100%;
}

.bonusPoints>div>div {
    width: 100%;
}

.bonusPoints>div>div:nth-child(2) {
    margin: 0 auto;
    width: 50%;
}

.bonusPoints>div>div:nth-child(1) {
    position: relative;
}

.bonusPoints>div>div:nth-child(1)>h4 {
    font-size: 16px;
   
}

.bonusPoints>div>div:nth-child(1)>h4>a {
    color: #000;
}

.bonusPoints>div>div:nth-child(1)>div {
    width: 380px;
    position: absolute;
    left: 135px;
    bottom: -5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px 7px;
    box-sizing: border-box;
    box-shadow: 0 0 2px #666;
    display: none;
}

.glyphicon-question-sign {
    margin-left: 3px;
    color: #00CD00;
    z-index: 999;
    font-weight: normal;
}

.bonusPoints>div>div:nth-child(1)>p>span {
    color: red;
    margin-left: 10px;
}

.bonusPoints>div>div:nth-last-child(1) {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}

.bonusPoints>div>div:nth-last-child(1)>span:nth-child(1) {
    margin-right: 10px;
}

.bonusPoints>div>div:nth-last-child(1)>span:nth-child(2) {
    color: #ccc;
    margin-left: 10px;
}

.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.btn-primary{
      background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 5px 10px; 
}
.box-primary{
  border-top-color: #ecf0f5 !important;
  border-top-width: 16px;
  
}
.btn-primary:hover{
     background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}
.delete-one{
    background-color: ff4141 !important;
    margin-left: 15px;
    border-radius: 6px;
}
.sreachs{
    background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 7px 15px; 
}

</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>奖扣任务</li>
        <li class="active">我的奖扣</li>
    </ol>
</section>
<section class="content container-fluid"  onload="opener.location.reload()">
    <div class="box box-primary">
    </div>
    <div class="row">
        <div class="col-md-12 header">
       <div class="header-left">
           <img src="{$data_all['users']['avatar']??'/static/avatar.jpg'}" alt="" srcset=""/>
         <div>
            <h3>{$data_all['users']['name']}</h3>
            <p>{$data_all['users']['department_name']}<span>/{$data_all['users']['job_number']}</span></p>
         </div>
       </div>
        <div class="header-right">
            <input type="text" class="layui-input" id="date"/>
        </div>
         

        </div>
    </div>
    <div class="row">
        <div class="col-md-12 nav">
    <p class="nav-title">本月预计扣<span style="color: red;">-{$data_all['data_total']['total_del_integral']}</span>分</p>
<div class="nav-body">

    <div class="nav-list"> 
        <div>月度奖分<span style="color: #ccc">奖分任务{$data_all['data_total']['prize_integral_target']}(
                            {if condition="$data_all.data_prize_buckle.type == 0"}
                            周
                            {else:}
                            月
                            {/if}
                            )</span></div>
       <h2>{$data_all['data_total']['prize_integral_com']}</h2>
        <div>奖分任务预计扣分<span>{$data_all['data_total']['prize_integral_del']}</span></div>
        <div>奖分任务实际扣分<span>{$data_all['data_total']['prize_integral_del_real']}</span></div>
    </div>

    <div class="nav-list">
        <div>月度扣分<span style="color: #ccc">扣分任务 {$data_all['data_total']['buckle_integral_target']}(
                            {if condition="$data_all.data_prize_buckle.type == 0"}
                            周
                            {else:}
                            月
                            {/if}
                            )</span></div>
        <h2>{$data_all['data_total']['buckle_integral_com']}</h2>
        <div>扣分任务预计扣分<span>{$data_all['data_total']['buckle_integral_del']}</span></div>
        <div>扣分任务实际扣分<span>{$data_all['data_total']['buckle_integral_del_real']}</span></div>
    </div>
    <div class="nav-list">
    
        <div>月度奖扣比例<span style="color: #ccc">月度奖扣比例任务 {$data_all['data_total']['rate_target']}%(月)</span></div>
        <h2>{$data_all['data_total']['rate_com']}%</h2>
        <div>比例任务预计扣分<span>{$data_all['data_total']['rate_del']}</span></div>
        <div>比例任务实际扣分<span>{$data_all['data_total']['rate_del_real']}</span></div>
    </div>

    <div class="nav-list">
        <div>月度人次<span style="color: #ccc">人次任务{$data_all['data_total']['people_target']}(
                        {if condition="$data_all.data_people.data_total.type == 1"}
                        日
                        {elseif condition="$data_all.data_people.data_total.type == 2"}
                        周
                        {else:}
                        月
                        {/if})</span></div>
        <h2>{$data_all['data_total']['people_com']}</h2>
        <div>人次任务预计扣分<span>{$data_all['data_total']['people_del_total']}</span></div>
        <div style="width: auto">人次任务实际扣分<span>{$data_all['data_total']['people_del_total_real']}</span></div>
    </div>
    
</div>

        </div>
    </div>
    <div class="row" id="awardAndDeduct">
        <div class="col-md-12 bonusPoints">
            <!-- 左上 -->
            <!-- 奖励分 -->
            <div class="bonus-left" id="award">
                <div>
                    <h4>
                        <a href="{:url('awardtask/index_info',['uid'=>input('uid',0)])}">奖分任务 (
                            {if condition="$data_all.data_prize_buckle.type == 0"}
                            周
                            {else:}
                            月
                            {/if}
                            )
                            <span class="glyphicon glyphicon-question-sign"></span>
                        </a>
                    </h4>
                    <div>奖分任务是管理员对有奖分权限的管理层规定的奖分目标。
                        管理阶层对所有员工的奖分达到或超过，视为完成任务。
                    </div>
                    <p>预计总扣分:<span>-{$data_all.data_prize_buckle.total_prize_del}</span></p>
                </div>
                <div id="chart" style="height: 230px; width: 480px; margin-top: -72px;"></div>

                {if condition="$data_all.data_prize_buckle.type == 1"}
                <div>
                    <span>已完成<b> {$data_all.data_prize_buckle.total_prize} </b>/月</span>|<span>任务目标<b>{$data_all.data_prize_buckle.integral_reward}</b></span>
                </div>
                {/if}
            </div>
            <!-- 右上 扣分-->
            <div class="bonus-right" id="deduct">
                <div>
                    <h4><a href="{:url('awardtask/buckle_info',['uid'=>input('uid',0)])}">扣分任务(
                        {if condition="$data_all.data_prize_buckle.type == 0"}
                        周
                        {else:}
                        月
                        {/if}
                        )<span class="glyphicon glyphicon-question-sign"></span></a></h4>
                    <div>扣分任务是管理员对有扣分权限的管理层规定的扣分下限。
                        管理阶层对所有员工的扣分达到或超过，视为完成任务。
                    </div>
                    <p>预计总扣分:<span>-{$data_all.data_prize_buckle.total_buckle_del}</span></p>
                </div>
                <div id="chart2" style="height: 230px; width: 480px; margin-top: -72px;"></div>
                {if condition="$data_all.data_prize_buckle.type == 1"}
                <div>
                    <span>已完成<b> {$data_all.data_prize_buckle.total_buckle} </b>/月</span>|<span>任务目标<b>{$data_all.data_prize_buckle.integral_deduct}</b></span>
                </div>
                {/if}
            </div>
        </div>
    </div>
    <div class="row">
        <!--奖扣分任务分为周和月显示-->
        <div class="col-md-12 bonusPoints" id="personNum">
            <!-- 左下 人次任务-->
            <div class="bonus-left" style="position: relative">
                <div style="position: absolute;top:10px;left:10px; z-index: 999;">
                    <h4><a href="{:url('awardtask/people_info',['uid'=>input('uid',0)])}">人次任务 (
                        {if condition="$data_all.data_people.data_total.type == 1"}
                        日
                        {elseif condition="$data_all.data_people.data_total.type == 2"}
                        周
                        {else:}
                        月
                        {/if}
                        )<span class="glyphicon glyphicon-question-sign"></span></a></h4>
                    <div>人次任务是管理员对有奖扣人次权限的管理层规定的人次下限。管理阶层对所有管理员工的奖扣人次达到或超过，视为完成任务。</div>
                    <p>预计总扣分:<span>-{$data_all.data_total.people_del_total}</span></p>
                </div>
                <div id="chart3" style="width: 480px;height: 230px; "></div>
                {if condition="$data_all.data_people.data_total.type == 3"}
                <div style="position: absolute; bottom: 10px; left: 10%; text-align: left; width: 70%;">
                    <span>已完成<b> {$data_all.data_people.data_total.total_people} </b>/月
                    </span>|<span>任务目标<b>{$data_all.data_total.people_target}</b></span>
                </div>
                {/if}
                {if condition="$data_all.data_people.data_total.type == 1"}
                    </span>|<span>任务目标<b>{$data_all.data_total.people_target}</b></span>
                {/if}
            </div>
            <!-- 右下 比例任务-->
            <div class="bonus-right" id="proportion">
                <div>
                    <h4><a href="{:url('awardtask/rate_info',['uid'=>input('uid',0)])}">比例任务( 月 )<span class="glyphicon glyphicon-question-sign"></span></a></h4>
                    <div>比例任务是管理员对有奖扣分权限的管理层规定的奖扣百分比。
                        管理阶层对所有管理员工的奖扣达到或超过且比例值，视为完成任务。
                    </div>
                    <p>预计扣分:<span>-{$data_all.data_rate.rate_del}</span></p>
                </div>
                <div id="chart4" style="height: 230px; width: 480px; margin-top: -72px;"></div>
                <div>
                    <span>已完成<b>{$data_all.data_rate.rate_com}%</b>/月</span>|<span>任务目标<b>{$data_all.data_rate.rate_target}%</b></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
    </div>
</section>
<script>
    $(function(){
        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });


    });

      var now = new Date();
        var yy = now.getFullYear(); //年
        var mm = now.getMonth() + 1; //月
        var dd = now.getDate(); //日
        var hh = now.getHours(); //时
        var ii = now.getMinutes(); //分
        var ss = now.getSeconds(); //秒
        var time = yy + "-";
        if (mm < 10) time += "0";
        time += mm + "-";
        if (dd < 10) time += "0";
        time += dd + " ";
        if (hh < 10) time += "0";
        time += hh + ":";
        if (ii < 10) time += '0';
        time += ii + ":";
        if (ss < 10) time += '0';
        time += ss;
       
        let date = document.querySelector("#date");
            date.onblur = function(){
                let dateValue =  date.value;
            if(dateValue.length == 7){
               console.log(dateValue);
            }
            }


    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        var value_a = "{:input('time',date('Y-m',time()))}";
        var uid = "{:input('uid',0)}";
        var nowtime = "{:date('Y-01-01 H:i:s',time())}";
        laydate.render({
            elem: '#date' ,
             type: 'month',
            value: value_a,
             // min: nowtime,
            max: time
            ,done: function(value, date){
                var url= "{:url('index')}"+'/time/'+value+'/uid/'+uid;
                window.location.href=url;
            }
        });
    });


    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var myChart2 = echarts.init(document.getElementById('chart2'));
    var myChart3 = echarts.init(document.getElementById('chart3'));
    var myChart4 = echarts.init(document.getElementById('chart4'));
    // 获取表元素
    var awardChart = document.getElementById("award");
    var deductChart = document.getElementById("deduct");

    var dailyIntegral = 5; //日常积分
    var fixedIntegral = 6;//固定积分
    var otherIntegral = 7;//其他积分
    var AIntegral = 0;//a分得分
    var mDeduct = 0; // 月扣除
    var type_1 = "{$data_all.data_prize_buckle.type}";
    if(type_1 ==0){
        var awardSelected = 2; // 切换 奖励月或周表(假设1-2)
        var deductSelected = 4; // 切换 扣分月或周表(假设3-4)
    }else{
        var awardSelected = 1; // 切换 奖励月或周表(假设1-2)
        var deductSelected = 3; // 切换 扣分月或周表(假设3-4)
    }
    var type_2 = "{$data_all.data_people.data_total.type}";
    if(type_2 ==1){
        var personSelected = 5; // 切换 人次任务 日、周、月表(假设5-7)
    }else if(type_2 ==2){
        var personSelected = 6; // 切换 人次任务 日、周、月表(假设5-7)
    }else{
        var personSelected = 7; // 切换 人次任务 日、周、月表(假设5-7)
    }

    var prize_rate = '0%';
    var buckle_rate = '0%';
    var people_rate = '0%';
    {if condition="$data_all.data_prize_buckle.type == 1"}
    prize_rate = {$data_all.data_prize_buckle.prize_rate};
    buckle_rate = {$data_all.data_prize_buckle.buckle_rate};
    {/if}
        {if condition="$data_all.data_people.data_total.type == 3"}
        people_rate = {$data_all.data_people.data_total.people_rate};
        {/if}
    // 左上 奖励月表
        console.log(prize_rate);
    var awardMonth = {
        // 标题组件，包含主标题和副标题
        title: {
            show: true,
            text: "本月奖分比例",
            subtext: prize_rate+'%' ,
            // subtext: 20 + '%' ,
            x: 'center',
            y: '80px',
            textStyle: { // 主标题样式
                fontSize: '16',
                color: '#BFBFBF',
                fontWeight: 'normal'
            },
            // 副标题文本样式设置
            subtextStyle: {
                fontSize: '22',
                color: '#666'
            }
        },
        tooltip: {
            // 触发类型: item:数据项触发，axis：坐标轴触发
            trigger: 'item',
            formatter: "{a}<br/>{b}: {c} ({d}%)",
            show: false
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            show: false
        },
        series:
            {
                name: '奖分比例',
                type: 'pie',
                // 饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: ['60%', '85%'],
                // 是否启用防止标签重叠策略，默认开启
                avoidLabelOverlap: true,
                hoverAnimation: false,
                // 取消hover 高亮
                // legendHoverLink: false,
                // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    // { value: prize_rate, name: '奖励', itemStyle: { normal: {color: '#8CD029'} }  },
                    // { value: mDeduct, name: '扣', itemStyle: { normal: {color: '#3AA1FF'} }  }
                    { 
                        value: prize_rate/100, // 奖励比例
                        name: '奖励比例', 
                        itemStyle: { 
                            normal: {
                                color: '#8CD029'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#8CD029'
                            } 
                        },
                        label: { 
                            normal: { 
                                formatter:'{b}\n{d}%',
                            } 
                        } 
                    },
                    {   
                        value: 1-prize_rate/100,  // 剩余比例
                        itemStyle: { 
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            } 
                        },
                        label: { 
                            normal: { 
                                show: false 
                            } 
                        } 
                    }
                ]
            }
    };

    // 左上 奖励周表
    var awardWeek = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
                // shadowStyle: {
                //     shadowBlur: 10
                // }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['第一周', '第二周', '第三周', '第四周'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: { // x 轴 样式
                    lineStyle: {
                        color: '#DEDEDE',
                        width: 2
                    }
                },
                axisLabel: {
                        textStyle: {
                            color: '#545454',//坐标值得具体的颜色
                        }
                    }
            }
        ],
        yAxis : [
            {
                show: false,
                type : 'value'
            }
        ],
        series : [
            {
                name:'实际奖分',
                type:'bar',
                barWidth: '40%',
                // barCategoryGap:'-100%',//柱图间距
                data:[
                    {if condition ="isset($data_all.data_prize_buckle.list_prize)"}
                    {volist name="$data_all.data_prize_buckle.list_prize" id="vo"}
                    {$vo.total_prize},
                    {/volist}
                    {/if}
                ],
                itemStyle:{
                    normal:{color:'#8CD029'}
                },
            }
        ]
    };
    if (awardSelected == 1) {
        myChart.setOption(awardMonth) // 选择奖励月表
    }else if(awardSelected == 2){
        myChart.setOption(awardWeek) // 选择奖励周表
    }
    
    // 右上 扣分月表
    var deductMonth = {
        title: {
            show: true,
            text: "本月扣分比例",
            subtext: buckle_rate+'%',
            // subtext: 50 + '%',
            x: 'center',
            y: '80px',
            textStyle: { // 主标题样式
                fontSize: '16',
                color: '#BFBFBF',
                fontWeight: 'normal'
            },
            // 副标题文本样式设置
            subtextStyle: {
                fontSize: '22',
                color: '#666'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            show: false
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            show: false
        },
        series:
            {
                name: '扣分比例',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: true,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    // { value: buckle_rate, name: '', itemStyle: { normal: {color: '#8CD029'} }  },
                    // { value: mDeduct, name: '扣', itemStyle: { normal: {color: '#3AA1FF'} }  }
                    // { value: 335, name: '奖', itemStyle: { normal: {color: '#8CD029'} } },
                    { 
                        value: buckle_rate, 
                        name: '扣', 
                        itemStyle: { 
                            normal: {
                                color: '#3AA1FF'
                            }, 
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#3AA1FF'
                            } 
                        } 
                    },
                    {   
                        value: 100 - buckle_rate,  // 剩余比例
                        itemStyle: { 
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            } 
                        },
                        label: { 
                            normal: { 
                                show: false 
                            } 
                        } 
                    }
                ]
            }
};
    
    // 右上 扣分周表
    var deductWeek = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['第一周', '第二周', '第三周', '第四周'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine: { // x 轴 样式
                lineStyle: {
                    color: '#DEDEDE',
                    width: 2
                }
            },
            axisLabel: {
                    textStyle: {
                        color: '#545454',//坐标值得具体的颜色
                    }
                }
        }
    ],
    yAxis : [
        {
            show: false,
            type : 'value'
        }
    ],
    series : [
        {
            name:'实际扣分',
            type:'bar',
            barWidth: '40%',
            data:[
                {if condition ="isset($data_all.data_prize_buckle.list_buckle)"}
                {volist name="$data_all.data_prize_buckle.list_buckle" id="vo"}
                {$vo.total_buckle},

                {/volist}
                {/if}
            ],
            itemStyle:{ // 单个柱状颜色
                normal:{color:'#FF8D8D'}
            },
        }
    ]
};
    
    if(deductSelected == 3) {
        myChart2.setOption(deductMonth) // 选择扣分月表
    }else if(deductSelected == 4) {
        myChart2.setOption(deductWeek) // 选择扣分周表
    }

    // 左下 人次任务 日表
    var personDate = {
        backgroundColor: "#fff",
        xAxis: [
            {
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none', // 去掉指示线
                label: {
                    backgroundColor: '#93cd30'
                }
            },
        },
        xAxis: {
              show: true,
            data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
            axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#D9D9D9'
            },
          },
          axisTick: {
            show: false,
          },
          // 刻度标签是否显示
          axisLabel: {
              show: false,
          }
        },
        yAxis: {
            show: false,
           axisLine: {
                show: false,
            },
        },
        series: [
            {
                name: '实际人数',
                type: 'line',
                symbol:'circle',
                symbolSize:8,
                itemStyle: {
                    normal: {
                        color: '#8292FA',  //圈圈的颜色
                        lineStyle: {
                            color: '#E0E4FD'  //线的颜色
                        }
                    }
                },
                showAllSymbol: true, // 所有拐点显示小球
                data:[
                    {volist name="$data_all.data_people.list" id="vo"}
                    {$vo.people_sum},
                    {/volist}
                ],
            },
            {
                name: '目标人数',
                type: 'line',
                symbol:'circle',
                itemStyle: {
                    normal: {
                        color: "transparent",  //圈圈的颜色
                        lineStyle: {
                            color: 'transparent'  //线的颜色
                        }
                    }
                },
                data:[
                    {if condition="isset($data_all.data_people.list)"}
                    {volist name="$data_all.data_people.list" id="vo"}
                    {$vo.data_day},
                    {/volist}
                    {/if}
                ],
            },
        ]
    };
    // 周表
    var personWeek = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['第一周', '第二周', '第三周', '第四周'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: { // x 轴 样式
                    lineStyle: {
                        color: '#DEDEDE',
                        width: 2
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#545454',//坐标值得具体的颜色
                    }
                }
            }
        ],
        yAxis : [
            {
                show: false,
                type : 'value'
            }
        ],
        series : [
            {
                name:'人次',
                type:'bar',
                barWidth: '40%',
                data:[
                    {volist name="$data_all.data_people.list" id="vo"}
                    {$vo.people_sum},
            {/volist}
        ],
        itemStyle:{ // 单个柱状颜色
            normal:{color:'#8292FA'}
        },
    }
    ]
    };
    // 月表
    var personMonth = {
        title: {
            show: true,
            text: "本月人次比例",
            // subtext: '奖 : ' + otherIntegral + '\n\n扣 : ' + mDeduct,
            subtext: people_rate + '%',
            x: 'center',
            y: '80px',
            textStyle: { // 主标题样式
                fontSize: '16',
                color: '#BFBFBF',
                fontWeight: 'normal'
            },
            // 副标题文本样式设置
            subtextStyle: {
                fontSize: '22',
                color: '#666'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            show: false
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            show: false
        },
        series:
            {
                name: '比例任务',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: true,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    // { value: otherIntegral, name: '奖', itemStyle: { normal: {color: '#8CD029'} }  },
                    // { value: mDeduct, name: '扣', itemStyle: { normal: {color: '#3AA1FF'} }  },
                    { 
                        value: people_rate,
                        name: '人次比例', 
                        itemStyle: { 
                            normal: {
                                color: '#FFCD42'
                            }, 
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#FFCD42'
                            }  
                        } 
                    },
                    {   
                        value: 100 - people_rate,  // 剩余比例
                        itemStyle: { 
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            } 
                        },
                        label: { 
                            normal: { 
                                show: false 
                            } 
                        } 
                    }

                ]
            }
    };
    
    if(personSelected == 5) {
        myChart3.setOption(personDate); // 人次任务日表
    }else if(personSelected == 6) {
        myChart3.setOption(personWeek); // 周表
    }else if(personSelected == 7) {
        myChart3.setOption(personMonth); // 月表
    }
    
    // 右下 比例任务月表
    otherIntegral = {$data_all.data_rate.prize_integral_com};
    mDeduct = {$data_all.data_rate.buckle_integral_com};
    var proportionMonth = {
        // color: ['#E44F26', '#e0e0e0', "#E44F26"],
        title: {
            show: true,
            text: "本月",
            subtext: '奖 : ' + otherIntegral + '\n\n扣 : ' + mDeduct,
            x: 'center',
            y: '80px',
            textStyle: { // 主标题样式
                fontSize: '16',
                color: '#BFBFBF',
                fontWeight: 'normal'
            },
            // 副标题文本样式设置
            subtextStyle: {
              fontSize: '14',
              color: '#666'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            show: false
        },
        series:
        {
            name: '比例任务',
            type: 'pie',
            radius: ['60%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: otherIntegral, name: '奖', itemStyle: { normal: {color: '#8CD029'} }  },
                { value: mDeduct, name: '扣', itemStyle: { normal: {color: '#3AA1FF'} }  }
                // { value: 335, name: '奖', itemStyle: { normal: {color: '#8CD029'} } },
                // { value: 220, name: '扣', itemStyle: { normal: {color: '#3AA1FF'} } }
            ]
        }
    };
    myChart4.setOption(proportionMonth); // 比例任务月表

    
    var glyphicon = document.querySelectorAll(".glyphicon-question-sign");

    var  bonusPoints = document.querySelectorAll(".bonusPoints>div>div:nth-child(1)>div");

    glyphicon[0].onmouseover = function () {
        bonusPoints[0].style.display = "block";
    }

    glyphicon[0].onmouseout = function () {
        bonusPoints[0].style.display = "none";
    }
   
    glyphicon[1].onmouseover = function () {
        bonusPoints[1].style.display = "block";
    }

    glyphicon[1].onmouseout = function () {
        bonusPoints[1].style.display = "none";
    }

    glyphicon[2].onmouseover = function () {

        bonusPoints[2].style.display = "block";
    }

    glyphicon[2].onmouseout = function () {
        bonusPoints[2].style.display = "none";
    }

     glyphicon[3].onmouseover = function () {
       
        bonusPoints[3].style.display = "block";
    }

    glyphicon[3].onmouseout = function () {
        bonusPoints[3].style.display = "none";
    }
   
</script>




{/block}
